<template>
  <div class="page-content">
    <!-- 表格顶部区域 -->
    <TableBar
      :columns="columns"
      @changeColumn="
        (newcolumns) => {
          this.columns = newcolumns;
        }
      "
      :layout="layout"
    >
      <div slot="bottom">
        <el-row>
          <!-- <el-col :span="6">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="dialog"
              v-if="!hiddenBtn"
              >新增</el-button
            >
          </el-col> -->
          <el-col :span="20">
            <el-select
              v-model="processId"
              placeholder="请选择加工厂"
              size="mini"
            >
              <el-option
                v-for="item in processList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </div>
      <div slot="top">
        <el-form label-width="80px">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-form-item label="批次名称">
                <el-input
                  placeholder="请输入批次名称"
                  v-model="searchValue"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-row
              :xs="24"
              :sm="12"
              :lg="6"
              style="float: right; margin-right: 10px"
            >
              <el-button type="primary" @click="search" v-auth="'processing_batch_select'">搜索</el-button>
              <el-button
                @click="
                  () => {
                    this.searchValue = '';
                    this.setAllList();
                  }
                "
                v-auth="'processing_batch_select'"
                >重置</el-button
              >
            </el-row>
          </el-row>
        </el-form>
      </div>
    </TableBar>

    <!-- 表格区域 -->
    <TheTable
      :data="allList"
      :page.sync="page"
      :showPage="showPage"
      @changeSize="
        (size) => {
          this.page.pageSize = size.pageSize;
          this.setAllList();
        }
      "
      @changePage="
        (page) => {
          this.page.current = page.current;
          this.setAllList();
        }
      "
      :Bottom="35"
    >
      <!-- <div class="item" effect="dark" placement="top-start">
        <el-table-column type="expand" fixed="left">
          <template slot-scope="scope">
            <el-form label-position="left" class="demo-table-expand">
              <ShowRow
                :columns="showColumns"
                :row="scope.row"
                num="3"
              ></ShowRow>
            </el-form>
          </template>
        </el-table-column>
      </div> -->

      <div
        v-for="item in columns"
        :key="item.id"
        class="item"
        effect="dark"
        placement="top-start"
      >
        <el-table-column
          :label="item.name"
          v-if="item.show"
          :prop="item.prop"
          show-overflow-tooltip
        ></el-table-column>
      </div>

      <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            mini
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="dialog(scope.row)"
          ></el-button>
          <el-button
            mini
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="delInfo(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column> -->
    </TheTable>

    <!-- 表单框 -->
    <!-- <el-dialog
      :title="dialogTitle"
      width="50%"
      :visible.sync="showDialog"
      top="20vh"
      @close="
        () => {
          this.showDialog = false;
          this.from = {};
        }
      "
    >
      <el-form
        label-position="right"
        ref="formRef"
        :rules="rules"
        :model="form"
        label-width="135px"
      >
        <FormRow :form="form" :label-prop="formColumns" num="2"></FormRow>
        <el-form-item size="large" class="dialog-bottom-btn">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
// import ShowRow from "../../components/OrderManagement/ShowRow";
// import FormRow from "../../components/ProcessingPlantManagement/public/FormRow";
import {
  getAllInfoByPage,
  getAllInfoById,
  getInfoById,
  addInfo,
  delInfoById,
  editInfo,
} from "../../Api/processingplant/process_batch";
export default {
  name: "ProcessingBatch",
  // components: { ShowRow, FormRow },
  data() {
    return {
      allList: [],
      columns: [
        // 表头数据
        {
          name: "加工作业时间",
          show: true,
          prop: "jobTime",
        },
        { name: "产品批次编号", show: true, prop: "id" },
        { name: "所属加工厂名称", show: true, prop: "factoryName" },
        { name: "产品名称", show: true, prop: "productName" },
        { name: "产品sku", show: true, prop: "productSku" },
        { name: "产品数量", show: true, prop: "count" },
        { name: "单位", show: true, prop: "unit" },
        { name: "绑码数量", show: true, prop: "codeCount" },
      ],
      layout: "search, refresh, column",
      // form: {}, // 存放表单数据
      // showDialog: false, // 控制表单的显示与隐藏
      // showPage: true, // 显示分页
      // hiddenBtn: false, // 用于控制添加按钮的显示于隐藏，
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      // dialogTitle: "新增",
      processId: "", // 加工厂编号
    };
  },
  computed: {
    // // 用于列表展示
    // showColumns() {
    //   let noArr = ["level", "tagStatus", "video", "purchaseChannel"];
    //   return this.columns.filter((item) => {
    //     return !noArr.includes(item.prop);
    //   });
    // },

    // // 用于表单填写
    // formColumns() {
    //   let noArr = [
    //     "id",
    //     "video",
    //     "purchaseChannel", // 渠道
    //     "factoryId", // 加工厂id
    //   ];
    //   return this.columns.filter((item) => {
    //     return !noArr.includes(item.prop);
    //   });
    // },

    // 校验规则
    // rules() {
    //   let ruleList = {};
    //   this.formColumns.forEach((item) => {
    //     ruleList[item.prop] = [
    //       { required: true, message: `请填写${item.name}`, trigger: "blur" },
    //     ];
    //   });
    //   return ruleList;
    // },

    ...mapState("process", {
      processList: (state) => state.processList,
    }),
  },
  watch: {
    // 监听加工厂变化
    processId(processId) {
      this.setAllList();
    },
  },
  created() {
    this.processId = this.processList[0].id; // 默认是第一个加工厂
    // // 如果没有加工厂，隐藏新增按钮
    // if (this.processList.length !== 0) {
    //   this.processId = this.processList[0].id;
    // } else {
    //   this.hiddenBtn = true;
    // }
  },
  methods: {
    // 获取数据
    async setAllList() {
      const { data: res } = await getAllInfoByPage(
        this.processId,
        this.page.current,
        this.page.pageSize
      );
      if (res.statusCode !== 20000) {
        this.$message.error(res.message);
      }
      this.allList = res.data.records;
      this.page.total = res.data.total;
      console.log(this.allList);
    },

    // // 打开弹窗
    // dialog(row = undefined) {
    //   let form = JSON.parse(JSON.stringify(row));
    //   if (row.id) {
    //     // 修改
    //     this.form = form;
    //     this.dialogTitle = "修改";
    //   } else {
    //     // 增加
    //     this.dialogTitle = "新增";
    //     this.form.factoryId = this.processId;
    //   }
    //   this.showDialog = true;
    // },

    // // 提交按钮
    // async submit() {
    //   this.$refs.formRef.validate(async (access, obj) => {
    //     console.log(this.form);
    //     if (access) {
    //       if (!this.form.id) {
    //         // 增加
    //         const { data: res } = await addInfo(this.form);
    //         if (res.statusCode !== 20000) {
    //           console.error(res.message);
    //           this.$message.error(res.message);
    //         } else {
    //           this.clearform();
    //           this.$message.success(res.message);
    //           this.setAllList();
    //         }
    //       } else {
    //         // 修改
    //         const { data: res } = await editInfo(this.form);
    //         if (res.statusCode !== 20000) {
    //           console.error(res.message);
    //           this.$message.error(res.message);
    //         } else {
    //           this.clearform();
    //           this.$message.success(res.message);
    //           this.setAllList();
    //         }
    //       }
    //     }
    //   });
    //   this.$refs.formRef.validate(async (val) => {
    //     if (!val) return false;
    //     if (!this.form.id) {
    //       // 增加
    //       const { data: res } = await addInfo(this.form);
    //       if (res.statusCode !== 20000) {
    //         console.error(res.message);
    //         this.$message.error(res.message);
    //       } else {
    //         this.clearform();
    //         this.$message.success(res.message);
    //         this.setAllList();
    //       }
    //     } else {
    //       // 修改
    //       const { data: res } = await editInfo(this.form);
    //       if (res.statusCode !== 20000) {
    //         console.error(res.message);
    //         this.$message.error(res.message);
    //       } else {
    //         this.clearform();
    //         this.$message.success(res.message);
    //         this.setAllList();
    //       }
    //     }
    //   });
    // },

    // 删除按钮
    // async delInfo(id) {
    //   this.$confirm("此操作将永久删除该信息，请谨慎操作, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(async () => {
    //       const { data: res } = await delInfoById(id);
    //       console.log("res: ", res);
    //       if (res.statusCode !== 20000) {
    //         this.$message.error(res.message);
    //       } else {
    //         this.setAllList();
    //         this.$message.success(res.message);
    //       }
    //     })
    //     .catch(() => {
    //       return this.$message.info("已取消删除！");
    //     });
    // },
  },
};
</script>

<style lang="scss" scoped>
.el-form .el-form-item .el-input {
  width: 300px;
}
</style>